<template>
  <!-- 搜索 -->
  <view
    class="search"
    style="position: fixed; z-index: 100; width: 100%"
    :style="{ top: userStore.navHeight, position: fixed ? 'fixed' : 'static' }"
  >
    <view class="vanSearch" @click="handleFocus">
      <van-search
        :value="keyVal"
        placeholder="搜索朝代、汉服、配饰"
        shape="round"
        :disabled="disabled"
        placeholder-style="color:#A7A7A7;"
        @focus="handleFocus"
        @change="handleChange"
      />
    </view>
    <view class="shop" @click="shopSelect">{{ btnTitle }}</view>
  </view>

  <!-- 作用：用来占位高度，否则下面元素会向上到顶部(custom_head采用fixed定位) -->
  <view v-if="isPerch && fixed" class="perch" style=""></view>

  <!-- 店铺选择弹出层 -->
  <van-popup
    :show="shopSelectShow"
    position="bottom"
    round
    @close="shopSelectShow = false"
  >
    <view class="shopSelectContent">
      <view class="title">店铺选择</view>

      <view class="select">
        <view
          v-for="(item, index) in shopNameList"
          :key="index"
          @click="shopNameHandle(item.text, index)"
          :class="shopActiveIndex == item.index ? 'active' : ''"
          >{{ item.text }}</view
        >
      </view>

      <view class="btn">
        <view class="cancel" @click="shopSelectCancel">取消</view>
        <view class="confirm" @click="confirmShopSelect">确定</view>
      </view>
    </view>
  </van-popup>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Alert, unAlert } from "@/utils/tool";
import useUserStore from "@/store/modules/user";
import { getItem, updateItem } from "@/utils/localStorage";
import { updateShopId } from "@/api/user";
import verify from "@/utils/verify";
import { selectSearch } from "@/api/comboMeal/index";

const userStore = useUserStore();

console.log("us:", userStore);

const props = defineProps({
  // 引入该组件的页面传过来的头部标题
  btnTitle: {
    type: String,
    required: true,
  },
  // 是否开启高度占位
  isPerch: {
    type: Boolean,
    default: true,
  },
  // 是否fixed
  fixed: {
    type: Boolean,
    default: false,
  },
  // 是否禁用输入框
  disabled: {
    type: Boolean,
    default: false,
  },
});

const keyVal = ref("");
const handleChange = (e) => {
  keyVal.value = e.detail;
};

// 店铺选择弹出层
// 状态
const shopSelectShow = ref(false);
// 点击选择店铺btn
const shopSelect = async () => {
  if (props.btnTitle == "搜索") {
    console.log("测试：", keyVal.value);

    if (!keyVal.value) {
      Alert(`请输入关键字`, "none", 1000, true);
      return;
    }

    Alert(`搜索中`, "loading", 0, true);

    // 将搜索的聊天记录

    const res = await selectSearch(keyVal.value);

    console.log("res:", res);

    if (res.data.code == 200) {
      unAlert();
    }
  } else {
    // 先登录,再选店铺
    if (!verify()) {
      return;
    }

    shopSelectShow.value = true;
  }
};

// 店铺
const shopNameList = ref([
  {
    index: 0,
    text: "拾光锦汉服体验店",
  },
  {
    index: 1,
    text: "陕西工院汉服体验",
  },
]);
// 店铺选择
const shopName = ref("");
// 激活店铺Active
const shopActiveIndex = ref(-1);
// 选择店铺处理函数
const shopNameHandle = async (name, index) => {
  shopName.value = name;
  shopActiveIndex.value = index;
};

onShow(() => {
  if (getItem("userInfo")) {
    shopActiveIndex.value = getItem("userInfo").shopId;

    if (getItem("userInfo").shopId == 1) {
      shopActiveIndex.value = 0;
    } else if (getItem("userInfo").shopId == 2) {
      shopActiveIndex.value = 1;
    }

    console.log("shopActiveIndex.value:", shopActiveIndex.value);
  }
});

// 确认店铺
const confirmShopSelect = async () => {
  // 校验（店铺还是之前则不进行请求）
  if (shopActiveIndex.value + 1 == getItem("userInfo").shopId) {
    Alert("不可更换一样哦~");

    shopSelectShow.value = false;
    return;
  }

  // 正式逻辑等上线再改
  const res = await updateShopId({
    id: getItem("userInfo").id,
    shopId: Number(shopActiveIndex.value + 1),
  });

  if (res.data.code == 200) {
    Alert("更换成功", "success");
    updateItem("userInfo", "shopId", res.data.data.shopId);

    shopSelectShow.value = false;
  } else {
    Alert("更换失败", "error");
  }

  console.log("res:", res);

  return;
  // 测试
  shopSelectShow.value = false;
  Alert(`已选择${shopName.value}`, "none", 1500, true);
};

// 取消
const shopSelectCancel = () => {
  shopSelectShow.value = false;

  if (getItem("userInfo")) {
    shopActiveIndex.value = getItem("userInfo").shopId;

    if (getItem("userInfo").shopId == 1) {
      shopActiveIndex.value = 0;
    } else if (getItem("userInfo").shopId == 2) {
      shopActiveIndex.value = 1;
    }
  }
};

// 输入框聚焦
const handleFocus = () => {
  if (props.btnTitle == "店铺选择") {
    uni.navigateTo({
      url: "/pagesA/search/index",
    });
  }
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  // padding: 18rpx;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  overflow: hidden;

  .vanSearch {
    flex: 1;
  }

  .van-search {
  }

  :deep(van-search) {
    flex: 1;

    .van-cell {
      background-color: #f5f5f5 !important;
    }
  }

  .shop {
    padding: 10rpx 20rpx;
    background-color: $btn;
    color: #fff;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    margin-left: 10rpx;
    transition: all 0.2s;
    margin-right: 20rpx;

    &:active {
      opacity: 0.7;
    }
  }
}

.perch {
  width: 100%;
  height: 90rpx;
  background-color: unset;
}

// 选择店铺弹出层
.shopSelectContent {
  height: 700rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    font-size: 30rpx;
    font-weight: 800;
    margin: 40rpx 0 60rpx;
  }

  .select {
    width: 100%;
    padding: 0 60rpx;
    margin-bottom: 100rpx;

    view {
      font-size: 30rpx;
      height: 100rpx;
      border: 1px solid #ffc345;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14rpx;
    }

    .active {
      background-color: #ffc345;
      color: #fff;
    }
  }

  .btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 50rpx;

    view {
      width: 160rpx;
      height: 80rpx;
      color: #fff;
      font-weight: 300;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      transition: all 0.2s;
    }

    .cancel {
      background-color: #bbbbbb;

      &:active {
        opacity: 0.7;
      }
    }
    .confirm {
      background-color: $btn;

      &:active {
        opacity: 0.7;
      }
    }
  }
}
</style>
